<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:fragment="head">
    <meta charset="UTF-8">
    <title>Title</title>

    <script th:src="@{https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js}"></script>
    <script th:src="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js}"></script>

    <link th:href="@{/assets/dist/css/bootstrap.min.css}" rel="stylesheet">
    <link rel="canonical" th:href="@{https://getbootstrap.com/docs/5.2/examples/headers/}">
    <link rel="canonical" th:href="@{https://getbootstrap.com/docs/5.2/examples/blog/}">


    <link th:href="@{/css/headers.css}" rel="stylesheet">
    <link th:href="@{/css/blog.css}" rel="stylesheet">
    <link th:href="@{/css/blog.rtl.css}" rel="stylesheet">


    <link th:href="@{/css/user.css}" rel="stylesheet">
    <link th:href="@{/css/index.css}" rel="stylesheet">



    <style>
        body{
            background: #f0fcff;
        }

        .c{
            border-bottom: 1px solid #d6ecf0;
            transition: 0.5s;
        }
        .shadow-sm{
            background: white;
        }
        body{
            min-height: 100%;
            display: grid;
            grid-template-rows: auto 1fr auto;
        }
        .blog-footer{
            margin-top: auto;

        }
    </style>
</head>
<body>

<div class="top" th:fragment="top(n)">
    <div class="container shadow-sm">
        <header class="blog-header lh-1 py-3 border-bottom">
            <div class="row flex-nowrap justify-content-between align-items-center">
                <div class="col-4 pt-1">
                    <a class="link-secondary mmm " th:href="@{/logout}" >Log out</a>
                </div>
                <div class="col-4 text-center">
                    <a class="blog-header-logo text-dark" href="#">Boke</a>
                </div>
                <div class="col-4 d-flex justify-content-end align-items-center">
                    <a class="link-secondary" href="#" aria-label="Search">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"></circle><path d="M21 21l-5.2-5.2"></path></svg>
                    </a>
                    <a class="btn btn-sm btn-outline-secondary" th:href="@{/login}">Sign up</a>
                </div>
            </div>
        </header>

        <div class="d-flex py-1 mb-2 container justify-content-center">
            <nav class="nav d-flex justify-content-between">
                <a th:href="@{/}" th:classappend="${n==1}?'c'" class="p-2 link-secondary" aria-current="page">主页</a>
                <a th:href="@{/page/user/1}" th:classappend="${n==2}?'c'" class="p-2 link-secondary">博客管理</a>
                <a th:href="@{/back/article/add}" th:classappend="${n==3}?' c'" class="p-2 link-secondary">what</a>
                <a th:href="@{/user}" th:classappend="${n==4}?'c'" class="p-2 link-secondary">个人中心</a>
<!--                <a th:href="@{/login}" th:classappend="${n==5}?'c'" class="p-2 link-secondary">login/out</a>-->
            </nav>
        </div>
    </div>
</div>

<!--    <div class="container">-->
<!--        <header class="d-flex justify-content-center py-3">-->
<!--            <ul class="nav nav-pills">-->
<!--                <li class="nav-item"><a th:href="@{/}" th:classappend="${n==1}?'active'" class="nav-link" aria-current="page">主页</a></li>-->
<!--                <li class="nav-item"><a th:href="@{/page/user/1}" th:classappend="${n==2}?'active'" class="nav-link">博客管理</a></li>-->
<!--                <li class="nav-item"><a th:href="@{/back/article/add}" th:classappend="${n==3}?' active'" class="nav-link">what</a></li>-->
<!--                <li class="nav-item"><a th:href="@{/user}" th:classappend="${n==4}?'active'" class="nav-link">个人中心</a></li>-->
<!--                <li class="nav-item"><a th:href="@{/login}" th:classappend="${n==5}?'active'" class="nav-link">login/out</a></li>-->
<!--            </ul>-->
<!--        </header>-->
<!--    </div>-->

<div th:fragment="footer">
</div>

<script>
    window.onload = function () {
        var mmm = document.querySelector(".mmm");
        mmm.addEventListener('click',function () {
            alert('已退出！');
        })
    }

</script>


</body>
</html>